<template>
	<view :class="pageClass" :style="pageStyle" v-if="pageReady">
		<moxi-nav :set="navSet"></moxi-nav>
		<view style="background: linear-gradient(to right,#19afff,#0055ff);color: #fff;padding: 10px;text-align: center;">
			<view style="font-size: 24px;font-weight: 600;display: flex;flex-direction: row;
			justify-content: center;margin-bottom: 10px;">
				<u-icon name="question-circle-fill" color="#ffffff" style="margin-right: 5px;" size="24"></u-icon>
				<text style="font-size: 20px;">常见问题</text>
			</view>
			<u-line></u-line>
			<view style="padding: 10px;text-align: center">
					<text :style="'color: '+app_color" class="hint" @click="open">提交问题</text>
			</view>
		</view>
		
		<view class="qa-box">
			<view class="qa-list" v-for="(list,key) in data">
				<view style="display: flex;flex-direction: row;">
					<view class="qa-key" :style="'background-color: '+app_color">
						Q{{key+1}}
					</view>
					<text class="u-line-1 qa-title">{{list.ask}}</text>
				</view>
				<view style="margin: 10px 0;">
					<u-line></u-line>
				</view>
				<view>
					<text class="ans">{{list.ans}}</text>
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="close" :round="10" >
			<view style="padding: 10px;" v-if="config.name&&config.name>0">
				 <u--input
				    :placeholder="config.name_desc"
				    border="surround"
				    v-model="info.name"
				  ></u--input>
			</view>
			<view style="padding: 10px;" v-if="config.tel&&config.tel>0">
				 <u--input
				    :placeholder="config.tel_desc"
				    border="surround"
				    v-model="info.tel"
				  ></u--input>
			</view>
			<view style="padding: 10px;" v-if="config.email&&config.email>0">
				 <u--input
				     :placeholder="config.email_desc"
				    border="surround"
				    v-model="info.email"
				  ></u--input>
			</view>
			<view style="padding: 10px;">
				<u--textarea
				 v-if="config.ask&&config.ask>0"
				 v-model="info.ask"
				 :placeholder="config.ask_desc" 
				  ></u--textarea>
			</view>
			<view style="padding: 10px;">
				<u-button text="提交咨询" :color="app_color" @click="save()"></u-button>
			</view>
		</u-popup>
		<moxi-tabbar :set="tabbar" v-if="tabbar.index_id"></moxi-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:[],
				show:false,
				info:{
					name:"",
					tel:"",
					email:"",
					ask:""
				},
				config:{}
			}
		},
		created(){
			this.get()
		},
		methods: {
			close(){
				this.show = false;
			},
			open(){
				this.show = true;
			},
			save(){
				this.moxiPost('/plugin/qa/index/index/submit',this.info,(data)=>{
					this.show = false;
					this.msg(data.hint)
				})
			},
			get(){
				this.moxiPost('/plugin/qa/index/index/get',{},(data)=>{
					this.config = data.config;
					this.data = data.data;
					this.$forceUpdate()
				})
			}
		}
	}
</script>

<style>
	.hint{
		padding: 5px 20px;border-radius: 25px;background: rgba(255, 255, 255, 0.7);color: #fff;font-size: 12px;
	}
.qa-list{
	margin: 5px;background: rgba(255, 255, 255, 0.64);padding: 10px;border-radius: 4px
}
.qa-key{
	width: 35px;height: 35px;border-radius: 100px;text-align: center;line-height: 35px;
	color: #fff;font-size: 14px;flex-shrink: 0;margin-right: 6px;;
}
.qa-title{
	font-weight: 600;color: #333;margin-top: 7px;flex: 1;font-size: 15px;;
}
.ans{
	font-size: 13px;color: #333
}

</style>
